@use "var.scss" as *;
@use "global.scss" as *;
.container {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    height: 100vh;
    overflow: hidden;
}

.bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.sun {
    margin: 0;
    padding: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 37.5rem;
    /* 600px / 16px = 37.5rem */
    height: 37.5rem;
    background: orange;
    border-radius: 50%;
}

.moon {
    margin: 0;
    padding: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    /* 计算得出月亮的位置 */
    transform: translate(calc(-50% + -10rem), calc(-50% + -11.25rem));
    /* -160px / 16px = -10rem, -180px / 16px = -11.25rem */
    width: 37.5rem;
    height: 37.5rem;
    /* 通过阴影绘制月亮 */
    box-shadow: 10rem 11.25rem 0 cyan;
    /* 160px / 16px = 10rem, 180px / 16px = 11.25rem */
    border-radius: 50%;
}

.sea {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 35%;
    /* 90px / 16px = 5.625rem */
    /* 背景模糊制造大海的感觉 */
    backdrop-filter: blur(6.25rem);
    /* 100px / 16px = 6.25rem */
    -webkit-backdrop-filter: blur(6.25rem);
    z-index: 99999;
}

.sun,
.moon,
.sun-box,
.moon-box,
.bg {
    transition: all 1s ease-in-out;
}

.sun-box,
.moon-box {
    /* 相对定位 */
    position: relative;
    /* 溢出隐藏 */
    overflow: hidden;
}

.light .sun-box {
    height: 100%;
}

.light .moon-box {
    height: 0;
}

.light .bg {
    background: #ffeea2;
}

.dark .sun-box {
    height: 0;
}

.dark .moon-box {
    height: 100%;
}

.dark .bg {
    background: #040720;
}

/* 移动端样式 */

@media (max-width: 767px) {
    .sun {
        width: 12.5rem;
        /* 200px / 16px = 12.5rem */
        height: 12.5rem;
    }
    .moon {
        width: 12.5rem;
        /* 200px / 16px = 12.5rem */
        height: 12.5rem;
        transform: translate(calc(-50% + -3.125rem), calc(-50% + -3.125rem));
        /* -50px / 16px = -3.125rem */
        border-radius: 50%;
        box-shadow: 3.125rem 3.125rem 0 cyan;
        /* 50px / 16px = 3.125rem */
    }
}
